<template>
	<view class="wrap">
		<map class="map" show-location :style="{height:phoneHeight,width:'100%'}" :markers="markers"
			:latitude="postionMap.lat" :longitude="postionMap.lng">
		</map>
	</view>
</template>

<script>
	import {
		getLastLocation,
		updateLocation
	} from '@/api/map/index.js';
	import gcoord from 'gcoord';
	export default {
		data() {
			return {
				view: null, // 自定义view控件
				phoneHeight: 'calc(100vh)', //地图高度
				postionMap: { //地图显示位置经纬度
					lng: 0,
					lat: 0
				},
				province: '', //当前定位省份
			}
		},

		computed: {
			markers() {
				return [{
					id: 'me',
					latitude: this.postionMap.lat,
					longitude: this.postionMap.lng,
					width: 100,
					height: 100,
					iconPath: '/static/images/person.png',
				}]
			}
		},
		onUnload() {
			this.view.hide()
		},
		onLoad() {
			this.getAddress();
			this.createView()
		},
		methods: {
			createView() {
				const deviceWidth = uni.getSystemInfoSync().windowWidth
				const leftPadding = (deviceWidth / 2) - 100
				this.view = new plus.nativeObj.View('button', {
						bottom: '40px',
						left: `${leftPadding}px`,
						height: '40px',
						width: '200px'
					},
					[{
						tag: 'rect',
						id: 'rect',
						position: {
							bottom: '0px',
							left: '0px',
							width: '200px',
							height: '40px'
						},
						rectStyles: {
							color: '#007AFF',
							radius: '5px',
						}
					}, {
						tag: 'font',
						id: 'font',
						text: '更新位置',
						position: {
							bottom: '0px',
							left: '0px',
						},
						textStyles: {
							size: '18px',
							color: '#fff'
						}
					}]);
				this.view.addEventListener('click', () => {
					this.getLoaction()
				})
				this.view.show();
			},
			// 获取上次定位位置?
			getAddress() {
				const data = {
					user_uid: uni.getStorageSync('user').id,
				}
				getLastLocation(data).then((res) => {
					if (res.code == 10000) {
						const {
							location_x,
							location_y
						} = res.data
						
						let result = gcoord.transform(
							[Number(location_x), Number(location_y)], // 经纬度坐标
							gcoord.BD09, // 当前坐标系
							gcoord.GCJ02, // 目标坐标系
						)
						that.postionMap.lng = result[0];
						that.postionMap.lat = result[1];
						console.log(res.data, 'data')
						console.log(result, 'result')
					}
				});
			},
			// 获取当前位置
			getLoaction() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res, 'res')
						that.province = res.address.province

						that.postionMap.lat = res.latitude
						that.postionMap.lng = res.longitude

						that.updateLocation();
					},
					fail: function(res) {
						uni.showToast({
							title: '更新位置失败！',
							icon: 'none',
							mask: true
						})
					}
				});
			},
			updateLocation() {
				let result = gcoord.transform(
					[Number(this.postionMap.lng), Number(this.postionMap.lat)], // 经纬度坐标
					gcoord.GCJ02, // 当前坐标系 
					gcoord.BD09, // 目标坐标系
				);

				const data = {
					longitude: result[0],
					latitude: result[1],
					province: this.province,
					city: "",
					district: "",
					town: "",
					street: "",
					user_uid: uni.getStorageSync('user').id,
				};
				updateLocation(data).then((res) => {
					if (res.code == 10000) {
						uni.showToast({
							title: '更新位置成功',
							icon: 'none',
							mask: true
						})

					}
				});
			},
		}
	}
</script>

<style scoped>
	.map {
		flex: 1;
		position: relative;
	}

	.bar {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		background-color: #007AFF;
		color: #fff;
		text-align: center;
	}
</style>
